<template>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div>
                            <form class="form-inline" onsubmit="return false;">
                                <div class="form-group">
                                    <el-select v-model="status" placeholder="提现状态">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>

                                <div class="input-daterange input-group" style="width:30%;margin-left: 8px;">
                                    <el-date-picker
                                            v-model="startTime"
                                            type="date"
                                            format="yyyy-MM-dd"
                                            @change="getStartTime"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                    <span class="input-group-addon"><i class="mdi mdi-chevron-right"></i></span>
                                    <el-date-picker
                                            v-model="endTime"
                                            type="date"
                                            @change="getEndTime"
                                            format="yyyy-MM-dd"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </div>

                                <div class="form-group" style="float:right;margin-right:100px;">
                                    <button class="btn btn-success" type="submit" v-on:click="search()">筛选</button>
                                </div>
                            </form>
                        </div>
                        <div class="table-responsive" style="width: 100%;margin-top: 20px;" v-loading="loading">
                            <el-table
                                    :data="list"
                                    style="width: 100%"
                            >
                                <el-table-column
                                        prop="nickname"
                                        label="提现用户"
                                        align="center"
                                        width="70">
                                </el-table-column>
                                <el-table-column
                                        prop="user_id"
                                        label="代理ID"
                                        width="60">
                                </el-table-column>
                                <el-table-column
                                        prop="real_name"
                                        label="提现人姓名"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        prop="openId"
                                        label="用户openId"
                                        width="140">
                                </el-table-column>
                                <el-table-column
                                        prop="mobile"
                                        label="联系手机号"
                                        align="center"
                                        width="98">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="created_at"
                                        label="提现申请时间"
                                        width="146">
                                </el-table-column>
                                <el-table-column
                                        prop="bank_name"
                                        label="账号类型"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        prop="account"
                                        label="提现账号"
                                        align="center"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        prop="price"
                                        label="提现金额"
                                        align="center"
                                        width="68">
                                </el-table-column>
                                <el-table-column
                                        prop="statusTxt"
                                        label="状态"
                                        align="center"
                                        width="70">
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        align="center"
                                        width="220"
                                >
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="success" @click="handleStatus(scope.row.id,1)"
                                                   v-if="scope.row.status===0">确认打款
                                        </el-button>
                                        <el-button size="mini" type="danger" @click="handleStatusFail(scope.row.id,-1)"
                                                   v-if="scope.row.status===0">打款失败
                                        </el-button>
                                        <label size="mini"
                                                   v-if="scope.row.status===1">已打款
                                        </label>
                                        <label size="mini"
                                               v-if="scope.row.status===-1" class="span-danger">打款失败--{{ scope.row.fail }}
                                        </label>
                                    </template>

                                </el-table-column>
                            </el-table>

                            <nav style="margin-top: 20px">
                                <el-pagination
                                        layout="total, sizes, prev, pager, next"
                                        :total="total"
                                        :hide-on-single-page="pageActive"
                                        @size-change="handleSizeChange"
                                        :page-size="pageSize"
                                        :current-page="currentPage"
                                        :page-sizes="[10, 20, 30, 40]"
                                        @current-change="handleCurrentChange"
                                >
                                </el-pagination>
                            </nav>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "WithdrawComponent",
        data() {
            return {
                startTime: '',
                endTime: '',
                pageActive: true,
                list: [],
                status:-1,
                pageSize: 10,
                total: 0,
                currentPage: 1,
                loading: true,
                options: [{
                    value: -1,
                    label: '全部'
                }, {
                    value: 1,
                    label: '已打款'
                }, {
                    value: 0,
                    label: '未打款'
                }],
            }
        },
        methods: {
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.search();
            },
            handleSizeChange:function(pageSize){
                this.pageSize = pageSize;
                this.search();
            },search: function () {
                let self = this;
                let uri = 'withdraw/post-list';
                self.loading = true;

                let postData = {
                    startTime: self.startTime,
                    endTime: self.endTime,
                    page: self.currentPage,
                    limit:self.pageSize,
                    status:self.status,
                };
                axios.post(uri, postData).then(function (result) {
                    self.total = result.withdraws.total;
                    if (self.total > 0) {
                        self.pageActive = false;
                    } else {
                        self.pageActive = true;
                    }
                    self.list = result.withdraws.data;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            getStartTime(date) {
                this.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
            },
            getEndTime: function (date) {
                this.endTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
            },
            handleStatusFail(id, status) {
                let self = this;
                this.$prompt('请输入失败原来', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern:/\S/,
                    inputErrorMessage: '内容不能为空'
                }).then(({ value }) => {
                    self.handleStatus(id, status,value)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            handleStatus(id, status,fail = ''){
                let self = this;
                let uri = "withdraw/set-status/"+id;
                let postData = {status:status,fail:fail};
                self.loading = true;
                axios.post(uri,postData).then(function (result) {
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                });
            }
        },
        created() {
            this.search();
        }
    }
</script>

<style scoped>

</style>
